---
{
	"title": "Twitter embedded timeline",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Helps with implementing Twitter embedded timelines.",
	"altLangPrefix": "twitter",
	"dateModified": "2025-10-07"
}
---
<div class="alert alert-warning">
	<h2>Unstable feature</h2>
	<p>The Twitter embedded timeline component is <strong>currently not functional</strong> due to changes on Twitter's end. Please note that this component is in a <strong>deprecated state</strong> and may not be supported in the future. We recommend using alternative methods for sharing Twitter content.
	</p>
	<p>A <strong>fallback mechanism</strong> has been implemented to verify whether the issue still persists. The plugin will attempt to load the Twitter timeline; if unsuccessful, it will default to displaying a link to the Twitter page. If successful, the timeline will be rendered as expected.</p>
</div>

<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>Helps with implementing Twitter embedded timelines.</p>
</section>

<section>
	<h2>Working examples</h2>
	<ul>
		<li>English:
			<ul>
				<li><a href="../../../demos/twitter/twitter-en.html">Twitter embedded timeline</a></li>
				<li><a href="../../../demos/twitter/twitter-extra-en.html">Twitter embedded timeline - Extra examples</a></li>
			</ul>
		</li>
		<li>French:
			<ul lang="fr">
				<li><a href="../../../demos/twitter/twitter-fr.html">Chronologie intégrée Twitter - Exemples d’extra</a></li>
				<li><a href="../../../demos/twitter/twitter-extra-fr.html">Chronologie intégrée Twitter</a></li>
			</ul>
		</li>
	</ul>
</section>

<section>
	<h2>How to implement</h2>
	<strong>Determine the type of timeline at <a rel="external" href="https://dev.twitter.com/web/overview">Twitter for Websites</a></strong>

	<ol>
		<li>Create you html embedded timeline link using <a rel="external" href="https://publish.twitter.com/">Twitter Publish</a> tool or learn more about query generation at <a rel="external" href="https://dev.twitter.com/web/embedded-timelines/search">Embedded Search Timeline</a>.
			<pre><code>&lt;a class=&quot;twitter-timeline&quot; href=&quot;https://twitter.com/WebExpToolkit&quot; data-tweet-limit=&quot;3&quot; &gt;Tweets by @WebExpToolkit&lt;/a&gt;</code></pre>
		</li>
		<li>Wrap the html embedded timeline link with a <code>div</code> element with <code>class="wb-twitter"</code>.
			<pre><code>&lt;div class="wb-twitter"&gt;&lt;/div&gt;</code></pre>
		</li>
		<li>
			With this example your final code should be:
			<pre><code>&lt;div class=&quot;wb-twitter&quot;&gt;
&lt;a class=&quot;twitter-timeline&quot; href=&quot;https://twitter.com/WebExpToolkit&quot; data-tweet-limit=&quot;3&quot; &gt;Tweets by @WebExpToolkit&lt;/a&gt;
&lt;/div&gt;</code></pre>
		</li>
	</ol>
</section>

<section>
	<h2>Configuration options</h2>
	<p>All configuration options are detailed in <a rel="external" href="https://dev.twitter.com/web/overview">Twitter for Websites</a> documentation:</p>
	<ul>
		<li><a rel="external" href="https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview">Timelines overview</a></li>
		<li><a rel="external" href="https://developer.twitter.com/en/docs/twitter-for-websites/supported-languages">Supported languages and browsers</a></li>
		<li><a rel="external" href="https://developer.twitter.com/en/docs/twitter-for-websites/webpage-properties">Webpage properties</a></li>
	</ul>
	<p>
		<strong>Note:</strong> Twitter has removed the ability to embed timelines with searches which includes hashtags.
		Instead you can use the collections or list which are created using <a rel="external" href="https://tweetdeck.twitter.com">Tweet Deck</a>.
		Please see <a rel="external" href="https://dev.twitter.com/web/overview">Twitter for Websites</a> for more information.
	</p>
	<p>Notable configuration options are outlined in the following table. WET may preset their values or leverage them in other ways.</p>
	<table class="table">
		<thead>
			<tr>
				<th scope="col">Type</th>
				<th scope="col">Option</th>
				<th scope="col">Description</th>
				<th scope="col">How to configure</th>
				<th scope="col">Values</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>HTML attribute</td>
				<td><code>data-dnt</code></td>
				<td>Do not track parameter. Controls whether to allow Twitter to use the widget to personalize content, suggestions and ads.</td>
				<td>Add a <code>data-dnt</code> attribute to the <code>&lt;a class="twitter-timeline"&gt;</code> element.</td>
				<td>
					<dl>
						<dt>None (default):</dt>
						<dd>WET automatically sets "true".</dd>
						<dt>"true":</dt>
						<dd>Disallows personalization.</dd>
						<dt>"false":</dt>
						<dd>Permits personalization.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td>HTML attribute</td>
				<td><code>data-height</code></td>
				<td>Widget's maximum height. A vertical scrollbar appears if the widget's content exceeds it.</td>
				<td>Add a <code>data-height</code> attribute to the <code>&lt;a class="twitter-timeline"&gt;</code> element.</td>
				<td>
					<dl>
						<dt>None (default):</dt>
						<dd>Uses as much height as possible.</dd>
						<dt>None (if <code>data-tweet-limit</code> is used):</dt>
						<dd>WET automatically uses the same height as "fb-page" (500 CSS pixels). Intended for backwards-compatibility.</dd>
						<dt>"fb-page":</dt>
						<dd>WET uses the same height as the Facebook page plugin (500 CSS pixels).</dd>
						<dt>Integer:</dt>
						<dd>Number of CSS pixels.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td>HTML attribute</td>
				<td><code>data-lang</code></td>
				<td>Widget's default language code. Used by the widget's user interface. Unsupported languages revert to English ("en").</td>
				<td>Add a <code>data-lang</code> attribute to the <code>&lt;a class="twitter-timeline"&gt;</code> element.</td>
				<td>
					<dl>
						<dt>None (default):</dt>
						<dd>Uses the link or closest parent element's <code>lang</code> attribute.</dd>
						<dt>None (if link or closest parent element contains <code>lang="zh-Hans"</code>):</dt>
						<dd>WET automatically sets "zh-cn". WET uses "zh-Hans" for Chinese (Simplified), but Twitter is unable to map it on its own.</dd>
						<dt>Language code:</dt>
						<dd>Any of <a rel="external" href="https://developer.twitter.com/en/docs/twitter-for-websites/supported-languages">Twitter's supported languages</a>.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td>HTML attribute</td>
				<td><code>data-tweet-limit</code></td>
				<td>Specify the number of tweets to be displayed. Stopped working on <time datetime="2023-07-21">July 21, 2023</time>.</td>
				<td>Add a <code>data-tweet-limit</code> attribute to the <code>&lt;a class="twitter-timeline"&gt;</code> element.</td>
				<td>
					<dl>
						<dt>None (default):</dt>
						<dd>Displays the top 100 most-liked tweets.</dd>
						<dt>Integer:</dt>
						<dd>Previously represented a specific number of tweets to display. WET now uses it as a flag to set a reduced height via <code>data-height</code>.</dd>
					</dl>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-twitter</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-twitter" ).trigger( "wb-init.wb-twitter" );</code>).</td>
				<td>Used to manually initialize the Twitter embedded timeline. <strong>Note:</strong> The Twitter embedded timeline will be initialized automatically unless the required markup is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-twitter</code> (v4.0.5+)</td>
				<td>Triggered automatically after the Twitter embedded timeline initializes.</td>
				<td>Used to identify where the Twitter embedded timeline was initialized (target of the event).
					<pre><code>$( document ).on( "wb-ready.wb-twitter", ".wb-twitter", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-twitter" ).on( "wb-ready.wb-twitter", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/twitter">Twitter embedded timeline plugin source code on GitHub</a></p>
</section>
